<template>
  <div class="WidgetDefinitions">
    <!-- <div v-for="(widgetDefinition, i) in widgetDefinitions" :key="i">
      <span>{{widgetDefinition.displayName}}</span>
      <span @click="handleClick(widgetDefinition)">add</span>
    </div> -->
    <div class="filter">
      <el-input placeholder="请输入组件名称" size="mini"></el-input>
    </div>
    <el-collapse>
      <el-collapse-item
        v-for="group in widgetDefinitionGroups"
        :key="group.name"
        :name="group.name"
        :title="group.displayName"
      >
        <div class="widget-definitions">
          <div
            class="widget-definition"
            v-for="widgetDefinition in group.widgetDefinitions"
            :key="widgetDefinition.tag"
            draggable="true"
            @dragstart="handleWidgetDragStart(widgetDefinition, $event)"
            @click="handleWidgetClick(widgetDefinition)"
          >
            <span class="widget-icon">
              <font-awesome-icon
                :icon="['fas', 'font']"
              />
            </span>
            <span class="widget-name">{{widgetDefinition.displayName}}</span>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject } from 'vue-property-decorator'
import ApplicationEditor from '@/components/application-editor/ApplicationEditor.vue'
import FileEditableObject from '@/core/editable-object/file/FileEditableObject'
import WidgetDefinition from '@/core/model/WidgetDefinition'
import { Collapse, CollapseItem, Input } from 'element-ui'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

@Component({
  components: {
    [Input.name]: Input,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    FontAwesomeIcon
  }
})
export default class WidgetDefinitions extends Vue {
  @Inject('app-editor')
  public appEditor!: ApplicationEditor

  private get fileEditableObject() {
    const currentEditableObject = this.appEditor.currentEditableObject
    if (currentEditableObject instanceof FileEditableObject) {
      return currentEditableObject
    }
    return null
  }
  
  private get file() {
    return this.fileEditableObject?.file
  }

  private get fileHandler() {
    return this.fileEditableObject?.fileHandler
  }

  private get widgetDefinitionGroups() {
    interface Group {
      name: string;
      displayName: string;
      widgetDefinitions: WidgetDefinition[];
    }
    const widgetDefinitionGroups: Group[] = []
    
    const groupMap = new Map<string, Group>()

    const ungrouped = {
      name: 'ungrouped',
      displayName: '未分组',
      widgetDefinitions: []
    }

    this.appEditor.widgetDefinitionGroups.forEach((d) => {
      const group = {
        name: d.name,
        displayName: d.displayName,
        widgetDefinitions: []
      }
      widgetDefinitionGroups.push(group)
      groupMap.set(d.name, group)
    })

    widgetDefinitionGroups.push(ungrouped)

    const widgetDefinitions = this.appEditor.widgetDefinitions

    for (const widgetDefinition of widgetDefinitions) {
      if (widgetDefinition.isSystem) {
        continue
      }
      const group = groupMap.get(widgetDefinition.group) || ungrouped
      group.widgetDefinitions.push(widgetDefinition)
    }

    return widgetDefinitionGroups
  }

  private handleWidgetClick(widgetDefinition: WidgetDefinition) {
    this.fileHandler?.addWidget(widgetDefinition)
  }

  private handleWidgetDragStart (widgetDefinition: WidgetDefinition, event: DragEvent) {
    if (event.dataTransfer) {
      event.dataTransfer.setData('widgetDefinitionTag', widgetDefinition.tag)
    }
  }
}
</script>
<style scoped lang="scss">
@import '~@/style/variables.scss';
.WidgetDefinitions {
  height: 100%;
  .filter {
    padding: 10px 5px 5px;
  }
  .widget-definitions {
    padding: 0px 5px;
  }
  .widget-definition {
    border: 1px solid $input-border-color;
    background: $input-background-color;
    height: 32px;
    line-height: 30px;
    cursor: pointer;
    margin-bottom: 5px;
  }
  .widget-icon {
    display: inline-block;
    height: 100%;
    padding: 0 10px;
    border-right: 1px solid $input-border-color;
  }
  .widget-name {
    padding: 0 10px;
  }
}
</style>
